<template>
  <div class="login">
    <div class="div-box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>学员登录</span>
        </div>
        <!-- 用户名 -->
        <el-row>
          <div>
            <!--            <el-input placeholder="请输入邮箱账号或者手机号"-->
            <!--                      v-model="username"-->
            <!--                      clearable>-->
            <!--              <template slot="prepend"><i class="el-icon-user"></i></template>-->

            <!--            </el-input>-->
            <span class="zh">账号</span>
            <input type="text"   class="inputName">
          </div>
        </el-row>

        <!-- 密码 -->
        <el-row>
          <div>
            <!--            <el-input placeholder="请输入密码"-->
            <!--                      v-model="password"-->
            <!--                      clearable>-->
            <!--              <template slot="prepend"><i class="el-icon-lock"></i></template>-->
            <!--            </el-input>-->
            <span class="mm">密码</span>
            <input type="password" class="inputPwd">

          </div>
        </el-row>

        <el-row>
          <el-checkbox v-model="checked">3天内自动登录</el-checkbox>
        </el-row>

        <!-- 按钮 -->
        <el-row class="el-row-div">
          <div>
            <el-button type="primary" style="width: 100%">登 录</el-button>
          </div>
          <div>
            <el-button style="width: 100%">短信快捷登录</el-button>
          </div>
          <div class="div-button">
            <div>
              <el-button type="text">忘记密码?</el-button>
            </div>

            <div>
              <el-button type="text">学员注册认证(自助)</el-button>
            </div>
          </div>
        </el-row>

        <div @mouseover="icomImg=true" @mouseout="icomImg=false" class="div-img">
          <div>
            <img src="../assets/img/canvas.png" alt="" width="80px" height="80px" v-show="icomImg">
          </div>
          <i class="el-icon-mobile-phone" style="font-size: 12px">在手机上使用</i>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'WebLogin',
        data () {
            return {
                username: '',
                password: '',
                checked: false,
                icomImg: false
            }
        },
        methods: {

        }
    }

</script>

<style scoped lang="less">
  .login{
    width: 100%;
    height: 100%;
    background: url("../assets/img/login-bg-small.jpg") no-repeat;
    background-size: 100% 100%;
  }

  /* 卡片样式大全 */
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  /* 卡片区域 */
  .box-card {
    height: 550px;
    width: 360px;
    /*border-radius: 15px;*/
  }

  /* 搜索框 */
  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  /* 布局 */
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /* div微调 */
  .el-row-div div{
    margin-bottom: 6px;
  }
  .div-button{
    display: flex;
    justify-content: space-between;
  }
  .div-box{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(255,255,255,0.5);
    padding: 0px 50px 0px 50px;
    width: 360px;
    height: 100%;
    position: fixed;
    right: 0px;
  }
  .div-img{
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  img{
    margin-left: 2px;
  }
  div{
    width: 100px;
    height: 120px;
  }
  i{
    /*margin-top: 40px;*/
    position: relative;

  }
  }
  .inputName{
    width: 310px;
    height: 35px;
    border-radius: 2px;
    border: 1px rgb(220,223,230) ridge;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
  }
  .inputPwd{
    width: 310px;
    height: 35px;
    border-radius: 2px;
    border: 1px rgb(220,223,230) ridge;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
  }
  .zh{
    font-size: 13px;
    position: relative;
    top: 25px;
  }
  .mm{
    font-size: 13px;
    position: relative;
    top: 25px;
  }
</style>

